<template>
    <div>
        <el-row style="
        border-bottom: 1px solid #e8e9ec;margin-bottom: 10px;padding-bottom: 10px; ">
            <el-button style="padding: 0px 20px;"  @click="onAddWork"> 添加工作</el-button> 
            <span style="padding-right:10px;font-style:solid;font-size:20px;color: #303133;">|</span>
            <el-radio-group v-model="activeButton" ref="myWorkButtonRef">
                <el-radio-button v-for="button in buttons" :key="button.name" :label="button.name" :name="button.path">
                    {{ button.name }}
                </el-radio-button>
            </el-radio-group>
        </el-row>
        <workList :type="listType"></workList>
        <AddWorkDraw @workCreated="onWorkCreated" ref="addWorkRef"></AddWorkDraw>
    </div>
</template>

<script>
    import AddWorkDraw from '@/views/projectManage/myWork/addWork.vue'
    import { GetMyTodoList, GetMyDoneList, GetMyCreateList } from '@/api/project.js'
    import mitt from '@/utils/mitt'
    import workList from '@/views/projectManage/myWork/index.vue'
 
   export default {
        name: 'ProjectManageIndex',
        data() {
            return {
            articleList: [],
            articleRef: null,
            message : [],
            buttons: [
                {
                    name: '待办',
                    path: '/project/manage/mywork'
                },
                {
                    name: '已办',
                    path: '/project/manage/worked'
                },
                {
                    name: '已创建',
                    path: '/project/manage/created'
                }
            ],
            activeButton: '待办'
            };
        },
        components: {
            AddWorkDraw,
            workList
        },

        computed: {
            listType() {
                const typeMap = {
                    '待办': 'todo',
                    '已办': 'done',
                    '已创建': 'created'
                };
                return typeMap[this.activeButton];
            }
        },

        mounted() {
            this.refreshTheDefaultClickEvent();
        },

        methods: {
            refreshTheDefaultClickEvent() {
                this.$nextTick(() => {
                    const dom = this.$refs.myWorkButtonRef.$el;
                    dom.click();
                    dom.style.cssText = "background-color:#ecf5ff;";
                });
            },

 
            onAddWork() {
                this.$refs.addWorkRef.openWorkDrawer();
            },
            onWorkCreated() {
                if (this.activeButton === '待办') {
                    const res = GetMyTodoList();
                    res.then((res) => {
                        if (res.data.code === 200) {
                            mitt.emit('refreshTodoList', res.data.data);
                            this.$refs.myWorkButtonRef.$el.click();
                        }
                    });
                } else if (this.activeButton === '已办') {
                    const res = GetMyDoneList();
                    res.then((res) => {
                        if (res.data.code === 201) {
                            mitt.emit('refreshDoneList', res.data.data);
                        }
                    });
                } else if (this.activeButton === '已创建') {
                    const res = GetMyCreateList();
                    res.then((res) => {
                        if (res.data.code === 201) {
                            mitt.emit('refreshCreatedList', res.data.data);
                        }
                    });
                }
            },
        }
    };
</script> 

  <style lang="scss" scoped>
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .el-button {
    margin-right:10px;
  }

  .el-button:active {
    color:#303133 ;
  }

  @font-face { 
    font-family:tapd-icon;
    src:url(https://static-fe.tapd.cn/fonts/tapd-icon.8ad40664.eot);
    src:url(https://static-fe.tapd.cn/fonts/tapd-icon.8ad40664.eot?#iefix) format("eot"),url(https://static-fe.tapd.cn/fonts/tapd-icon.bcc3d043.woff2) format("woff2"),url(https://static-fe.tapd.cn/fonts/tapd-icon.f668702f.woff) format("woff"),url(https://static-fe.tapd.cn/fonts/tapd-icon.7d2cf5e4.ttf) format("truetype"),url(https://static-fe.tapd.cn/img/tapd-icon.585c796e.svg#tapd-icon) format("svg");
    font-weight:400;
    font-style:normal;
  } 

  li { 
      list-style: none;
  } 

  .worktable-header  { 
      margin: 0 !important;
      z-index: 5; 
      padding: 16px 0px; 
      -ms-flex-pack: justify;  //这段代码的主要功能是通过Flexbox布局将项目在父容器的主轴上均匀分布。
      height: 28px; 
      top: 0; 
      border-bottom: 1px solid #e8e9ec; 
      display: -ms-flexbox; 
      display: flex; 
      -ms-flex-align: center; 
      align-items: center;   // 交叉轴居中
      justify-content: space-between; 

  } 

  .worktable-header__left  { 
      display: -ms-flexbox;  //旧版ie布局
      display: flex; 
      -ms-flex-align: center;  //旧版ie布局
      align-items: center;
  } 

  .worktable-header__right  { 
      display: -ms-flexbox; 
      display: flex; 
      -ms-flex-align: center; 
      align-items: center;
  } 

   .worktable-header__title  { 
      font-size: 20px; 
      font-weight: 700; 
      vertical-align: middle; 
      margin-right: 36px;
  } 

    .worktable-tab-right {
        height: 60px;
        z-index: 5;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        
            & .worktable-tab__group {
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: center;
                align-items: center;

                & .group__label {
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: center;
                align-items: center;
                margin-right: 8px;
                }
            }
}


  .tab-select { 
      display: inline-block; 
      background: #f3f4f6; 
      border-radius: 4px; 
      padding: 2px; 
      overflow: hidden;
  } 

  [class*=" tapd-icon"] { 
      font-family: tapd-icon!important; 
      -webkit-font-smoothing: antialiased; 
      -moz-osx-font-smoothing: grayscale; 
      font-style: normal;
  } 

  [class*=" tapd-icon-"] { 
      display: inline-block; 
      font-size: 13px; 
      font-style: normal; 
      font-weight: 400; 
      font-variant: normal; 
      text-transform: none; 
      line-height: 1; 
      vertical-align: middle; 
      color: #8c95a8; 
      cursor: pointer;
  } 

  [class*=" tapd-icon"], [class^="tapd-icon"] { 
      font-family: tapd-icon!important; 
      -webkit-font-smoothing: antialiased; 
      -moz-osx-font-smoothing: grayscale; 
      font-style: normal;
  } 

  .worktable-tab-right .worktable-tab__group .group__label .label-icon  { 
      color: #8c95a8; 
      font-size: 16px; 
      margin-right: 4px;
  } 

  .tapd-icon-group-v2:before { 
      content: "\EAEB";
  } 

  [class*=" tapd-icon-"]:hover { 
      color: #5d9bfc;
  } 

  .worktable-tab-right .worktable-tab__group .group__label .label-text  { 
      font-size: 12px; 
      color: #8c95a8;
  } 

  .tab-select .tab-select__item  { 
      float: left; 
      height: 18px; 
      line-height: 18px; 
      padding: 5px 8px; 
      cursor: pointer; 
      margin-right: 2px;
  } 

  .tab-select .tab-select__item:hover { 
      border-radius: 4px; 
      background: #fff;
  } 

  .tab-select .tab-select__item:last-child  { 
      margin-right: 0;
  } 

  .tab-select__item-label { 
      font-size: 14px; 
      font-weight: 400; 
      color: #182b50;
  } 

  .tab-select__item--active .tab-select__item-label  { 
      font-weight: 600; 
      color: #0d68ff;
  } 

  .tab-select .tab-select__item-label  { 
      font-size: 12px;
  } 

  .worktable-tab-right .worktable-tab__group .tab-select__item--active .tab-select__item-label  { 
      font-weight: 700;
  } 

  [class*=" tapd-icon-"], [class^="tapd-icon"] { 
      display: inline-block; 
      font-size: 13px; 
      font-style: normal; 
      font-weight: 400; 
      font-variant: normal; 
      text-transform: none; 
      line-height: 1; 
      vertical-align: middle; 
      color: #8c95a8; 
      cursor: pointer;
  } 

  .tab-select__item-icon { 
      font-size: 16px; 
      font-weight: 400; 
      color: #182b50; 
      margin-bottom: 2px;
  } 

  .tab-select__item--active .tab-select__item-icon  { 
      color: #3582fb;
  } 

  .tab-select .tab-select__item-icon  { 
      margin-right: 4px;
  } 

  .tapd-icon-space-v2:before { 
      content: "\EBF3";
  } 

  [class*=" tapd-icon-"]:hover, [class^="tapd-icon"]:hover { 
      color: #5d9bfc;
  } 

  .tab-select__item-icon:hover { 
      color: inherit;
  } 

  .tapd-icon-clock-v2:before { 
      content: "\EA5C";
  } 

  .tapd-icon-type-v2:before { 
      content: "\EC3B";
  } 



</style>